<template>
  <!--      <v-container fluid fill-height>-->
  <div class="page-root">
    <div class="wrapper">
      <br />
      <v-card class="elevation-12 logBg" light>
        <v-toolbar>
          <v-spacer></v-spacer>
          <v-spacer style="text-align: center; font-size: 32px"
            >你好,{{ username }}</v-spacer
          >
          <v-spacer> </v-spacer>
        </v-toolbar>
    
        <v-card-text>
           <div class="avatar-wrapper"  style="font-size: 22px;">
            <span> 头像: </span>  <Avatar style="margin:10px" :mode="1" :size="64"></Avatar>
          </div>
          <v-form v-show="isedit === false" style="font-size: 22px">
            昵称：<v-text-field
              readonly
              v-model="username"
              type="text"
              :rules="[rules.required(username)]"
            />
            邮箱：<v-text-field
              readonly
              v-model="email"
              type="text"
              :rules="[rules.required(email)]"
            />
          </v-form>

          <v-form v-show="isedit === true" style="font-size: 22px">
            昵称：<v-text-field
              v-model="username"
              type="text"
              :rules="[rules.required(username), rules.min(2), rules.max(16)]"
            />
            邮箱：<v-text-field
              v-model="email"
              type="text"
              :rules="[rules.required(email), rules.isEmail(email)]"
            />
          </v-form>
        </v-card-text>

        <v-card-text v-show="ischange === true">
          <v-form style="font-size: 22px">
            原密码：<v-text-field
              v-model="password"
              type="password"
              :rules="[rules.required(password), rules.min(6), rules.max(16)]"
            />
            新密码：<v-text-field
              v-model="password1"
              type="password"
              :rules="[rules.required(password1), rules.min(6), rules.max(16)]"
            />
            确认密码：<v-text-field
              v-model="password2"
              type="password"
              :rules="[
                rules.required(password2),
                rules.min(6),
                rules.max(16),
                check(password1, password2),
              ]"
            />
          </v-form>
        </v-card-text>

        <v-card-actions v-show="isorigin === true">
          <v-btn
            style="left: 8%; color: white; border: 1px solid #66ccff"
            @click="edit"
            :light="true"
            large
            color="primary"
            >编辑</v-btn
          >
          <v-spacer></v-spacer>
          <v-btn
            style="right: 8%; color: white; border: 1px solid #66ccff"
            @click="change"
            :light="true"
            large
            color="primary"
            >修改密码</v-btn
          >
        </v-card-actions>

        <v-card-actions v-show="ischange === true">
          <v-btn
            style="left: 8%; color: white; border: 1px solid"
            @click="backorigin"
            :light="true"
            large
            color="red"
            >取消</v-btn
          >
          <v-spacer></v-spacer>
          <v-btn
            style="right: 8%; color: white; border: 1px solid #00db00"
            @click="savechange"
            large
            color="green"
            >保存</v-btn
          >
        </v-card-actions>

        <v-card-actions v-show="isedit === true">
          <v-btn
            style="left: 8%; color: white; border: 1px solid #ff5151"
            @click="backorigin"
            :light="true"
            large
            color="red"
            >取消</v-btn
          >
          <v-spacer></v-spacer>
          <v-btn
            style="right: 8%; color: white; border: 1px solid #00db00"
            @click="saveedit"
            large
            color="green"
            >保存</v-btn
          >
        </v-card-actions>
        <br />
      </v-card>
    </div>
  </div>
</template>
<script>
import { rules } from "@/utils/validatingRules/validating-rules";
import Avatar from "@/components/views/common/Avatar/Avatar";
export default {
  name: "Login",
  data() {
    return {
      email: "",
      username: "",
      password: "",
      avatar: "",
      rules,
      isedit: false,
      ischange: false,
      isorigin: true,
      password1: "",
      password2: "",
    };
  },
  components: {
    Avatar,
  },
  methods: {
    check() {
      if (this.password1 == this.password2) {
        return true;
      } else return "两次密码不一致";
    },
    change() {
      this.isorigin = false;
      this.ischange = true;
    },
    edit() {
      this.isorigin = false;
      this.isedit = true;
    },
    backorigin() {
      this.isorigin = true;
      this.isedit = false;
      this.ischange = false;
    },
    savechange() {
      if (
        rules.required(this.password) != true ||
        rules.required(this.password1) != true ||
        rules.required(this.password2) != true ||
        this.check(this.password1 == this.password2) != true ||
        this.password.length < 6 ||
        this.password.length > 16 ||
        this.password1.length < 6 ||
        this.password2.length > 16 ||
        this.password1.length > 15 ||
        this.password2.length < 6
      ) {
        this.$Message.error("请正确填写数据！");
        return;
      }
      this.$api.common
        .resetpass(this.$store.state.user.email, this.password, this.password1)
        .then((res) => {
          let result = res;
          if (result.success == true) {
            this.$Message.success("修改密码成功");
          } else {
            this.$Message.error("修改失败，原因：" + result.exc);
          }
        })
        .catch(function (error) {
          console.log(error);
          this.$Message.error("保存失败,出现了意料之外的错误");
        });
    },
    saveedit() {
      if (
        rules.required(this.email) != true ||
        rules.required(this.username) != true ||
        rules.isEmail(this.email) != true ||
        this.username.length < 2 ||
        this.username.length > 16
      ) {
        this.$Message.error("请正确填写个人信息");
        return;
      }
      this.$api.common
        .resetemandun(this.$store.state.user.uid, this.username, this.email)
        .then((res) => {
          let result = res;
          if (result.success == true) {
            this.$Message.success("保存邮箱和昵称成功");
            this.$store.commit("setToken", result.data.token);
            this.$store.commit("setUser", {
              uid: this.$store.state.user.uid,
              username: result.data.newUsername,
              email: result.data.newEmail,
            });
          } else {
            this.$Message.error("修改失败，原因：" + result.exc);
          }
        })
        .catch(function (error) {
          console.log(error);
          this.$Message.error("保存失败,出现了意料之外的错误");
        });
    },
  },
  mounted() {
    this.email = this.$store.state.user.email;
    this.username = this.$store.state.user.username;
  },
};
</script>
<style scoped>
.page-root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.wrapper {
  width: 40vw;
}
.avatar-wrapper {
  display: flex;
  align-items: center;
  align-content: center;
}
</style>